<template>
  <div class="DS_main">
    <el-row :gutter="10">
      <el-col :span="5">
        <div class="box_border right_top">
          <!--设备状态-->
          <device-status ref="DeviceStatus"></device-status>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
        <div class="box_border margin-top_10 right_middle">
          <!--安全运转状态-->
          <safe-operation ref="SafeOperation"></safe-operation>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
        <div class="box_border margin-top_10 right_bottom">
          <!-- 事件日记 -->
          <event-log ref="eventlog"></event-log>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="box_border center_top">
          <!-- 数字统计 -->
          <data-statistics ref="DataStatistics"></data-statistics>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
        <div class="box_border center_middle margin-top_10">
          <div>
            <div class="margin-top_10 margin-bottom_10 search-row">
              <span class="margin-left_10 margin-right_10">时间 </span>
              <el-date-picker
                v-model="queryTimeValue"
                @blur="timeBlur"
                type="date"
                size="small"
                placeholder="选择日期"
              >
              </el-date-picker>
              <span class="margin-left_10 margin-right_10">网点 </span>
              <el-select
                clearable
                v-model="queryregion"
                placeholder="请选择网点"
                size="small"
              >
                <el-option
                  v-for="item in centerOutletsOptions"
                  :key="item.branchId"
                  :label="item.branchName"
                  :value="item.branchId"
                >
                </el-option>
              </el-select>
              <el-button
                class="margin-left_10"
                type="primary"
                size="small"
                @click="Query"
                >查询</el-button
              >
            </div>
            <!--用电量统计表格-->
            <electricity-consumption-table
              ref="ElectricityConsumptionTable"
              v-show="tableActive == 'first'"
              :querytime="querytime"
              :queryregion="queryregion"
            ></electricity-consumption-table>
            <!--非用电表格-->
            <no-work-electricity-table
              ref="NoWorkElectricityTable"
              v-show="tableActive == 'third'"
              :querytime="querytime"
              :queryregion="queryregion"
            ></no-work-electricity-table>
            <!--线路隐患-->
            <danger-table
              ref="DangerTable"
              v-show="tableActive == 'second'"
              :querytime="querytime"
              :queryregion="queryregion"
            ></danger-table>
          </div>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
        <div class="center_bottom margin-top_10">
          <el-row :gutter="10" style="height: 313px">
            <el-col :span="12">
              <!--异常统计分类-->
              <abnormal ref="abnormal"></abnormal>
            </el-col>
            <el-col :span="12">
              <!--用电量分析-->
              <electricity-consumption
                ref="electricityconsumption"
                @electricityconsumptionShow="
                  electricityconsumptionShow(arguments)
                "
              ></electricity-consumption>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="box_border left_top">
          <!-- 线路隐患 -->
          <danger
            ref="danger"
            @dangerShow="dangerShow(arguments)"
          ></danger>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
        <div class="box_border left_middle margin-top_10">
          <!-- 非工作时间 -->
          <no-work-electricity
            ref="noworkelectricity"
            @noworkelectricityShow="noworkelectricityShow(arguments)"
          ></no-work-electricity>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
        <div class="box_border left_bottom margin-top_10">
          <!-- 近7日智能控电次数 -->
          <intelligence-electrokinesis
            ref="IntelligenceElectrokinesis"
          ></intelligence-electrokinesis>
          <div class="tl-corner"></div>
          <div class="tr-corner"></div>
          <div class="bl-corner"></div>
          <div class="br-corner"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script src="./index.js"></script>
<style lang="stylus" src="./index.styl" scoped></style>
